<template>
	<view>
		<uni-segmented-control :current="current" :values="items" style-type="text" :active-color="activeColor"
			@clickItem="onClickItem" />
		<view class="content" v-if="current==0">
			<uni-card :is-full="true" spacing="0" v-for="(item, index) in orderList2">
				<view style="font-weight: bolder;">订单编号：{{item.id}}</view>
				<view>服务项目：{{item.typename}}</view>
				<view class="tag">
					服务门店：{{item.shopname}}
					<view v-if="item.status==0" class="minTag" :style="{color:statusColor[4]}">
						{{status[4]}}
					</view>
					<view v-if="item.status==1" class="minTag" :style="{color:statusColor[5]}">
						{{status[5]}}
					</view>
					<view v-if="item.status==2" class="minTag" :style="{color:statusColor[0]}">
						{{status[0]}}
					</view>
					<view v-if="item.status==3" class="minTag" :style="{color:statusColor[1]}">
						{{status[1]}}
					</view>
					<view v-if="item.status==4" class="minTag" :style="{color:statusColor[2]}">
						{{status[2]}}
					</view>
					<view v-if="item.status==5" class="minTag" :style="{color:statusColor[3]}">
						{{status[3]}}
					</view>
				</view>
				<view>下单时间：{{item.orderTime}}</view>
				<view class="selection">
					<view>
						实付：<text class="payPrice">{{item.price}}</text>元
					</view>
					<!-- 自定义显示，使用v-if，btn1是白底，btn2是蓝底 -->
					<button class="btn1" v-if="item.status==2" @click="toComment">立即评价</button>
					<button class="btn2" v-if="item.status==2">再来一单</button>
					
					<button class="btn1" v-if="item.status==0" @click="toCancel">取消订单</button>
					<button class="btn2" v-if="item.status==0">立即支付</button>
				
				<button class="btn1" v-if="item.status==1" @click="toRefund">申请退款</button>
				<button class="btn2" v-if="item.status==1">扫码结算</button>
					
				</view>
			</uni-card>
		</view>
		<view class="content" v-if="current==1">
			<uni-card :is-full="true" spacing="0" v-for="(item, index) in orderList">
				<view style="font-weight: bolder;">订单编号：{{item.id}}</view>
				<view>服务项目：{{item.typename}}</view>
				<view class="tag">
					服务门店：{{item.shopname}}
					<view  class="minTag" :style="{color:statusColor[4]}">
						{{status[4]}}
					</view>
				</view>
				<view>下单时间：{{item.orderTime}}</view>
				<view class="selection">
					<view>
						实付：<text class="payPrice">{{item.price}}</text>元
					</view>
					<button class="btn1" @click="toCancel">取消订单</button>
					<button class="btn2">立即支付</button>
				</view>
			</uni-card>
		</view>
		<view class="content" v-if="current==2">
			<uni-card :is-full="true" spacing="0" v-for="(item, index) in orderList">
				<view style="font-weight: bolder;">订单编号：{{item.id}}</view>
				<view>服务项目：{{item.typename}}</view>
				<view class="tag">
					服务门店：{{item.shopname}}
					<view class="minTag" :style="{color:statusColor[5]}">
						{{status[5]}}
					</view>
				</view>
				<view>下单时间：{{item.orderTime}}</view>
				<view class="selection">
					<view>
						实付：<text class="payPrice">{{item.price}}</text>元
					</view>
					<button class="btn1" @click="toRefund">申请退款</button>
					<button class="btn2">扫码核算</button>
				</view>
			</uni-card>
		</view>
		<view class="content" v-if="current==3">
			<uni-card :is-full="true" spacing="0" v-for="(item, index) in orderList">
				<view style="font-weight: bolder;">订单编号：{{item.id}}</view>
				<view>服务项目：{{item.typename}}</view>
				<view class="tag">
					服务门店：{{item.shopname}}
					<view class="minTag" :style="{color:statusColor[0]}">
						{{status[0]}}
					</view>
				</view>
				<view>下单时间：{{item.orderTime}}</view>
				<view class="selection">
					<view>
						实付：<text class="payPrice">{{item.price}}</text>元
					</view>
                    <button class="btn1"  @click="toComment">立即评价</button>

					<button class="btn2">再来一单</button>
				</view>
			</uni-card>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['全部', '待支付', '待使用', '待评价'],
				activeColor: '#007aff',
				status: ['待评价', '已取消', '已退款', '已完成', '待支付', '待使用'],
				statusColor: ['#fd9a22', '#a4a4a4', '#a4a4a4', '#a4a4a4', '#f05a4c', '#2c99ff'],
				orderStatus: 1,
				uid:1,
				current: 0,
				orderList:[],
				orderList2:[]
				
				
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
					console.log(this.current)
					if(this.current == 0){
						uni.request({
							url: 'http://localhost:7000/business/orders/myorder/'+this.$data.uid,
							method: 'GET',
							header: {
								authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjM2NDRhYzg1LTc1OGMtNDYxNi05MWMyLTJhMWE1MWIyZjZiZCIsInVzZXJuYW1lIjoiYWRtaW4ifQ.lJl-GhWVNK7lVo2uWb-7g6LtmxrmEt17kTuQUpG_qyERgm0g09Cyw73jmDrTVwTpt2U7Ys60OGrRVvKU7CLIkQ',
							},
							success: (res) => {
								console.log(res.data)
								this.$data.orderList2=res.data
								
							}
						});
					}else{
					uni.request({
						url: 'http://localhost:7000/business/orders/byStatus',
						data: {
							uid : this.$data.uid,
							status : this.current-1
						},
						method: 'GET',
						header: {
							authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjM2NDRhYzg1LTc1OGMtNDYxNi05MWMyLTJhMWE1MWIyZjZiZCIsInVzZXJuYW1lIjoiYWRtaW4ifQ.lJl-GhWVNK7lVo2uWb-7g6LtmxrmEt17kTuQUpG_qyERgm0g09Cyw73jmDrTVwTpt2U7Ys60OGrRVvKU7CLIkQ',
						},
						success: (res) => {
							console.log(res)
							this.$data.orderList=res.data
						}
					});}
				}
			},
			toComment() {
				uni.navigateTo({
					url: '/pages/comment/comment'
				})
			},
			toCancel() {
				console.log('11212');
				uni.showModal({
					title: '提示',
					content: '是否取消该订单？',
					success: (res) => {
						if (res.confirm) {

						} else {

						}
					}
				})
			},
			toRefund() {
				console.log('566');
			}
		},
		onLoad(e) {
			if (Object.keys(e).length !== 0) {
				this.current = +e.current
			}
			uni.request({
				url: 'http://localhost:7000/business/orders/myorder/'+this.$data.uid,
				method: 'GET',
				header: {
					authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjM2NDRhYzg1LTc1OGMtNDYxNi05MWMyLTJhMWE1MWIyZjZiZCIsInVzZXJuYW1lIjoiYWRtaW4ifQ.lJl-GhWVNK7lVo2uWb-7g6LtmxrmEt17kTuQUpG_qyERgm0g09Cyw73jmDrTVwTpt2U7Ys60OGrRVvKU7CLIkQ',
				},
				success: (res) => {
					console.log(res.data)
					this.$data.orderList2=res.data
					
				}
			});
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
		padding: 0 10rpx;
	}

	.content {
		padding: 0 22rpx;
		margin-top: 20rpx;
	}

	.selection {
		position: relative;
		line-height: 50rpx;
		align-items: center;
	}

	.uni-card {
		margin-bottom: 10rpx !important;
	}

	.payPrice {
		color: red;
		font-weight: bolder;
	}

	.selection>view:nth-child(1) {
		width: 310rpx;
	}

	.selection>button {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 26rpx;
	}

	.btn1 {
		color: black;
		background-color: white;
		border: 1rpx solid #0184FF;
		position: absolute;
		right: 170rpx;
		top: 0;
	}

	.btn2 {
		color: white;
		background-color: #0184FF;
		position: absolute;
		right: 0rpx;
		top: 0;
	}

	.tag {
		position: relative;
	}

	.minTag {
		position: absolute;
		font-size: 32rpx;
		font-weight: bolder;
		right: 0;
		top: 0;
	}
</style>